import React, { Component } from 'react';
import { connect } from 'dva';
import { Button, Icon, Popconfirm ,Timeline, Checkbox, Input, Modal, Table, message} from 'antd';
import {getInfoHistoryDetail,updateLogData,deleteInfoHistory,getInfoHistory} from '../../../services/fetch'

import "./DraftHistory.scss";
import "./styles.css"
import '../../../assets/font/iconfont.css'

function parseDom(arg) {

    var objE = document.createElement("div");
    objE.innerHTML = arg;
    return objE
}

function domToString(node) {
    let tmpNode = document.createElement('div')
    tmpNode.appendChild(node)
    let str = tmpNode.innerHTML
    tmpNode = node = null; // 解除引用，以便于垃圾回收  
    return str;
}

@connect(({ add }) => ({
    add: add
}))
class DraftHistory extends Component {
    constructor(props) {
        super(props);
        this.state = {
            current_draftId: null,
            isMoreDelete:false,
            allselectData:[],
            isEdit:false,
            currentId:null,
            currentEdit:'',
            yuLanVisible:false,
            currentHistoryDetail:null,
            quickCompareVisible:false,
            compareVisible:false,
            currentHistoryDetail1:null,
            currentHistoryDetail2:null,
            currentList1:null,
            currentList2:null,
            selectedRowKeys:[],
            historyLength:0,
            publishId:null,
            edit_time:null,
        };
    }
    

    openDraft = (id, type) => {
        console.log(id, type);
        this.setState({
            current_draftId: id
        })
        getInfoHistoryDetail({id:id}).then(res=>{
            console.log(res)
            if(res.data.code == 200){
               
                this.setState({
                    currentHistoryDetail:res.data.data.old.new_data_back,
                    edit_time:res.data.data.old.edit_time
                },()=>{
                    if(this.state.currentHistoryDetail.url == null){
                        this.props.onChangeHistory(this.state.currentHistoryDetail.content)
                    }
                    
                })
            }
        })
        this.props.dispatch({
            type: 'add/getCurrentDraft', 
            payload: { 
                id: id
            },
            callback: (data) => {
                console.log(data,'0000000000000000000000000000')
                data.key_words = data.key_words ? data.key_words.split('|') : data.key_words;
                this.props.draftChange(data)
            }
        })
        
        
    }

    huiTuiHIstory = () => {
        this.openDraft(this.state.currentId,0)
        
        setTimeout(()=>{
            this.handleYulanCancel()
        },200)
    }

    huiTuiHIstory2 = () => {
        this.openDraft(this.state.currentId,0)
        
        setTimeout(()=>{
            this.handlequickCompareCancle()
        },200)
    }
    componentDidMount(){

        
    }
    

    componentDidUpdate(){
        
            setTimeout(()=>{
                if(window.document.getElementById('content_box')!==null){
                    window.document.getElementById('content_box').innerHTML=this.state.currentHistoryDetail.content
                }
                if(window.document.getElementById('compare_content1')!==null){
                    window.document.getElementById('compare_content1').innerHTML=this.state.currentList1.diff_content
                }
                if(window.document.getElementById('compare_content2')!==null){
                    window.document.getElementById('compare_content2').innerHTML=this.state.currentList2.diff_content
                }
               
                if(this.props.add.infoHistoryList!==undefined){
                   let length = this.props.add.infoHistoryList.length
                   if(length>this.state.historyLength){
                    let id =  this.props.add.infoHistoryList[0].id
                    this.setState({
                        currentId:id,
                        current_draftId:id,
                        publishId:id,
                        historyLength:length
                    })
                   }
                    
                }
                if(window.document.getElementById('kintro1')!==null){
                    window.document.getElementById('kintro1').innerHTML=this.state.currentList1.diff_intro
                }
                if(window.document.getElementById('ktitle1')!==null){
                    window.document.getElementById('ktitle1').innerHTML=this.state.currentList1.diff_title
                }
                if(window.document.getElementById('kwords1')!==null){
                    window.document.getElementById('kwords1').innerHTML=this.state.currentList1.diff_key
                }
                if(window.document.getElementById('kintro2')!==null){
                    window.document.getElementById('kintro2').innerHTML=this.state.currentList2.diff_intro
                }
                if(window.document.getElementById('ktitle2')!==null){
                    window.document.getElementById('ktitle2').innerHTML=this.state.currentList2.diff_title
                }
                if(window.document.getElementById('kwords2')!==null){
                    window.document.getElementById('kwords2').innerHTML=this.state.currentList2.diff_key
                }
                if(window.document.getElementById('cintro1')!==null){
                    window.document.getElementById('cintro1').innerHTML=this.state.currentList1.diff_intro
                }
                if(window.document.getElementById('ctitle1')!==null){
                    window.document.getElementById('ctitle1').innerHTML=this.state.currentList1.diff_title
                }
                if(window.document.getElementById('cwords1')!==null){
                    window.document.getElementById('cwords1').innerHTML=this.state.currentList1.diff_key
                }
                if(window.document.getElementById('cintro2')!==null){
                    window.document.getElementById('cintro2').innerHTML=this.state.currentList2.diff_intro
                }
                if(window.document.getElementById('ctitle2')!==null){
                    window.document.getElementById('ctitle2').innerHTML=this.state.currentList2.diff_title
                }
                if(window.document.getElementById('cwords2')!==null){
                    window.document.getElementById('cwords2').innerHTML=this.state.currentList2.diff_key
                }
            },0)
        
        
        
    }
    showYulan = (id) => {
        getInfoHistoryDetail({id:id}).then(res=>{
            console.log(res)
            if(res.data.code == 200){
                let kword = res.data.data.old.new_data_back.key_words
                if(kword.indexOf('|')>-1){
                   let nKword = kword.split('|').join(' ')
                   res.data.data.old.new_data_back.key_words = nKword
                   console.log(nKword)
                }
                this.setState({
                    currentHistoryDetail:res.data.data.old.new_data_back,
                    edit_time:res.data.data.old.edit_time,
                    yuLanVisible:true,
                    currentId:id
                },()=>{
                   let abc = parseDom(this.state.currentHistoryDetail.content)
                   let img = abc.getElementsByTagName('img')
                   console.log(img)
                   for( let i=0 ;i<img.length;i++ ){
                    img[i].style.maxWidth='500px'
                   }       

                   let result = domToString(abc)
                   let chd = {...this.state.currentHistoryDetail}
                   chd.content = result
                   this.setState({
                       currentHistoryDetail:chd
                   })

                })
            }
        })
    }
    handleYulanOk = () => {
        this.setState({
            yuLanVisible:false,
            currentHistoryDetail:null,
            currentId:null
        })
    }
    handleYulanCancel = () => {
        this.setState({
            yuLanVisible:false,
            currentHistoryDetail:null,
            currentId:null
        })
    }
   
    delteDraft = (id,i) => {
        console.log(id,this.state.current_draftId)

            this.props.dispatch({
                type: "add/deleteDraft",
                payload: {
                    id: id
                }
            })

        
    }
    moreDelete = () => {
        this.setState({
            isMoreDelete:true
        })
    }
    moreDeleteCancel = () => {
        this.setState({
            isMoreDelete:false,
            allselectData:[]
        })
    }
    onChangeDelete = (e) => {
        let index = this.state.allselectData.findIndex(item=>item==e.target.value)
        let arrs = JSON.parse(JSON.stringify(this.state.allselectData))
        if(index>-1){
            arrs.splice(index,1)
        }else{
            arrs.push(e.target.value)
        }
        this.setState({
            allselectData:arrs
        })
    }
    allselect = (arr) => {       
        this.setState({
            allselectData:arr
        })
    }
    handlemoreDelete = () => {
        console.log(this.state.allselectData)
        let params = {
            id:this.state.allselectData
        }
            this.props.dispatch({
                type: "add/deleteDraft",
                payload:params
            })

    }
    editDraft = (id,remarks) => {
        this.setState({
            isEdit:true,
            currentId:id,
            currentEdit:remarks
        })
    }
    editOk = () => {
        let params = {
            id:this.state.currentId,
            remarks:this.state.currentEdit
        }

        this.props.dispatch({
            type: "add/updateDraft",
            payload: params,
        })

        // setTimeout(()=>{
            this.setState({
                isEdit:false,
                currentId:null,
                currentEdit:''
            })
        // },1000)
        
    }
    editCancel = () => {
        this.setState({
            isEdit:false,
            currentId:null,
            currentEdit:''
        })
    }
    onInputEdit = (e,i) => {
        console.log(this.props.add)
        this.setState({
            currentEdit:e.target.value
        })
    }
    quickCompare = (id) => {
        this.setState({
            quickCompareVisible:true,
            currentId:id
        })
        if(this.state.current_draftId==null){
            let data = this.props.add.infoHistoryList
           
            this.setState({
                current_draftId:data[0].id
            },()=>{
                this.getInfoHistoryDetail2(this.state.current_draftId,id)
            })
        }else{
            this.getInfoHistoryDetail2(this.state.current_draftId,id)
        } 
        
        
    }
    getCurrentDetail = () =>{
        let left=this.props.getLeft()
        console.log(left)
        left.key_words.join(' ')
        this.setState({
            currentHistoryDetail1:left
        })
    }
    handlequickCompareOk = () => {
        this.setState({
            quickCompareVisible:false,
            currentHistoryDetail1:null,
            currentHistoryDetail2:null,
            currentList1:null,
            currentList2:null
        })
    }
    handlequickCompareCancle = () => {
        this.setState({
            quickCompareVisible:false,
            currentHistoryDetail1:null,
            currentHistoryDetail2:null,
            currentList1:null,
            currentList2:null,
            currentId:null
        })
    }
    compare = () => {
        this.setState({
           compareVisible:true
        })
    }
    handleCompareOk = () => {
        this.setState({
            compareVisible:false,
            currentHistoryDetail1:null,
            currentHistoryDetail2:null,
            currentList1:null,
            currentList2:null,
            selectedRowKeys:[]
        })
    }

    tuiHuiModal = (id) => {
        this.openDraft(id,0)
        this.handleCompareOk()
    }

    getInfoHistoryDetail2 = (id1,id2) => {
        if(id2){
            let id = id1+','+id2
            getInfoHistoryDetail({id:id}).then(res=>{
                console.log(res,'hhhhhhhhhhh2')
                if(res.data.code == 200){
                    this.setState({
                        currentHistoryDetail1:res.data.data.new.new_data_back,
                        currentHistoryDetail2:res.data.data.old.new_data_back,
                        currentList1:res.data.data.new,
                        currentList2:res.data.data.old
                    })
                }
            })
        }
        
    }

    render() {
        const history_list = this.props.add.infoHistoryList || [];
        // const current_draftId = this.state.current_draftId || (history_list.length > 0 ? history_list[history_list.length-1].id : null);
        let arr = []
        history_list.forEach(item=>{
            arr.push(item.id)
        })
        const columns = [
            {
              title: '版本时间',
              dataIndex: 'edit_time',
              key:'edit_time',
            },
            {
              title: '修改者',
              dataIndex: 'user_name',
              key: 'user_name',
            },
            {
              title: '备注',
              dataIndex: 'remarks',
            },
            {
                title: '操作',
                width: 150,
                render: (text, record, index) => {
                    return (
                        <div>
                            <a onClick={() => this.tuiHuiModal(record.id)}>退回</a>                            
                        </div>
                    )
                }
            }
          ];
        const rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
                this.setState({
                    selectedRowKeys
                })
              console.log(selectedRowKeys);
              if(selectedRowKeys.length>2){
                  this.setState({
                    selectedRowKeys:[]
                  })
                  message.error('至多选择两个版本进行对比！')
              }else if(selectedRowKeys.length==2){
                  this.getInfoHistoryDetail2(selectedRowKeys[0],selectedRowKeys[1])
              }
            }
        }
        const {currentHistoryDetail1,currentHistoryDetail2,currentList1,currentList2} = this.state
        return (
            <div className="container">
                <div className='top_box'>
                    <div className='left_title'>历史版本</div>
                    <div className='right_btn' style={{display:this.state.isMoreDelete?'':'none'}}>
                    <Button size='small' style={{marginRight:'10px'}} onClick={()=>this.allselect(arr)}>全选</Button>
                    <Button size='small' style={{marginRight:'10px'}} onClick={this.handlemoreDelete}>删除</Button>
                    <Button size='small' onClick={this.moreDeleteCancel}>取消</Button>
                    </div>
                    <div className='right_btn' style={{display:!this.state.isMoreDelete&&!this.state.isEdit?'':'none'}}>
                    <Button size='small' style={{marginRight:'10px'}} onClick={this.moreDelete}>批量删除</Button>
                    <Button size='small' onClick={this.compare}>版本对比</Button>
                    </div>
                    <div className='right_btn' style={{display:this.state.isEdit?'':'none'}}>
                    <span style={{marginRight:'20px'}} className='iconfont icon-queren' onClick={this.editOk}></span>
                    <span style={{marginRight:'20px'}} className='iconfont icon-icon-gongneng-bianji' onClick={this.editCancel}></span>
                    </div>
                </div>
                { history_list&&history_list.length > 0 ?<Timeline>
                    {
                    history_list.map((draft, i) => {
                        return <Timeline.Item className="draft1" color={this.state.current_draftId==draft.id?'blue':'gray'} key={draft.id.toString()} dot={this.state.isMoreDelete?<Checkbox onChange={this.onChangeDelete} value={draft.id}  checked={this.state.allselectData.findIndex(item=>item==draft.id)>-1?true:false}></Checkbox>:null}>
                            {/* <span className={current_draftId == draft.id ? "dot dot_active" : "dot" }></span> */}
                            {/* <div className="draft_info" onClick={() => this.openDraft(draft.id, 0)}> */}
                            <div className="draft_info">
                                <Popconfirm
                                    title="是否切换到历史版本?"
                                    onConfirm={() => this.openDraft(draft.id, 0)}
                                    onCancel={() => console.log("取消了")}
                                    okText="确定"
                                    okType=""
                                    cancelText="取消"
                                >
                                    <a href="javascript:void(0);" style={{color: 'inherit'}}>{draft.edit_time}</a>
                                    <br/>
                                    <span>{draft.user_name?'('+draft.user_name+')':''}</span>
                                    
                                </Popconfirm>
                               
                                <div className='draft2'>
                                    <a href="javascript:void(0);"><span class="iconfont icon-fuzhi" onClick={() => this.quickCompare(draft.id)}></span></a>
                                    <a href="javascript:void(0);"><span class="iconfont icon-yulan" onClick={() => this.showYulan(draft.id)}></span></a>
                                    <a href="javascript:void(0);"><span class="iconfont icon-edit" onClick={() => this.editDraft(draft.id,draft.remarks)}></span></a>
                                    <a href="javascript:void(0);"><span className="iconfont icon-shanchu"  onClick={() => this.delteDraft(draft.id,i)}></span></a>
                                </div>
                                
                            </div>
                            <div className="draft_info">
                                <span style={{display:this.state.isEdit&&this.state.currentId==draft.id?'none':'',width:'150px'}}>{draft.remarks}</span>
                                <Input style={{display:this.state.isEdit&&this.state.currentId==draft.id?'':'none',width:'150px'}} size="small" defaultValue={draft.remarks} onInput={(e)=>this.onInputEdit(e,i)} />
                            </div>
                            
                        </Timeline.Item>
                    })
                }

                </Timeline> :
                    "暂无稿件历史版本"
    }

        {this.state.currentHistoryDetail!==null&&
            <Modal
            title="预览"
            visible={this.state.yuLanVisible}
            onOk={this.handleYulanOk}
            onCancel={this.handleYulanCancel}
            width='700px'
          >
              <div style={{position:'relative',height:'50px'}}>
                  <Button type='primary' style={{position:'absolute',right:'0'}} onClick={this.huiTuiHIstory}>版本回退</Button>
              </div>
              <div className='topBox' style={{borderBottom:'1px solid #EDEDED'}}>
                  <div className='top_box'>
                     <div className='left_title'>{this.state.currentHistoryDetail.information_title}</div>
                      <div className='right_btn' >
                          <img src={this.state.currentHistoryDetail.information_img} style={{width:'200px'}}/>
                      </div>
                  </div>
              </div>
              <div style={{marginTop:'20px'}}>
                  <div className='intro_box'>{this.state.currentHistoryDetail.intro?'摘要：'+this.state.currentHistoryDetail.intro:''}</div>
                  <div className='intro_box'>{this.state.currentHistoryDetail.key_words?'关键词：'+this.state.currentHistoryDetail.key_words:''}</div>
                  { this.state.currentHistoryDetail.type==1? 
                     this.state.currentHistoryDetail.url? <div className='intro_box'>url链接:{this.state.currentHistoryDetail.url}</div>
                      :<div id='content_box'>
                    
                      </div>
                  : this.state.currentHistoryDetail.url? <div className='intro_box'>url链接:{this.state.currentHistoryDetail.url}</div>
                  : 
                  this.state.currentHistoryDetail.img_arr.map((item, index) => {
                        return (
                            <div className="showDitalDiv" key={index}>
                                {item.img_path ?
                                    <img src={item.img_path} alt="..." width='100%' height='300px' /> : ''}
                                <div className="showDitalP">
                                    <h3>{item.img_intro&&item.img_intro.length>40?item.img_intro.substring(0,40)+'...':item.img_intro}</h3>
                                    {/* {item.img_intro ? <p>{item.img_intro}</p> : ''} */}
                                </div>
                            </div>
                        )
                    })}
              </div>
            
          </Modal>
        }
        {this.state.quickCompareVisible&&currentHistoryDetail2!==null&&currentHistoryDetail1!==null&&
         <Modal
            title="快速对比(红色代表删除的内容，蓝色表示新增的内容)"
            visible={this.state.quickCompareVisible}
            onOk={this.handlequickCompareOk}
            onCancel={this.handlequickCompareCancle}
            width='1000px'
          >
              <div style={{position:'relative',height:'50px'}}>
                  <Button type='primary' style={{position:'absolute',right:'0'}} onClick={this.huiTuiHIstory2}>退回该版本</Button>
              </div>
              <div className='top_box'>
            <div style={{width:'475px',paddingRight:'15px',borderRight:'1px solid #EDEDED'}}>
                <div className='tongji_box'>
                    <span>{currentHistoryDetail1.editor?'当前版本('+currentHistoryDetail1.editor+')':'当前版本'}</span>
                    <span>{this.state.currentHistoryDetail1.url?'0字':this.state.currentList1.text_count+'字'}</span>
                </div>
                <div>
                    <h2 className='compare_title' id='ktitle1'></h2>
                    {
                        currentList1.diff_key&&<div className='compare_kwords' id='kwords1'></div>
                    }
                     {
                        currentList1.diff_intro&&<div className='compare_kwords' id='kintro1'></div>
                    }
                    
                   
                    {
                      this.state.currentHistoryDetail1.type==1?this.state.currentHistoryDetail1.url? <div className='intro_box'>url链接:{this.state.currentHistoryDetail1.url}</div>
                      : <div id='compare_content1'>
                      </div>:this.state.currentHistoryDetail1.url? <div className='intro_box'>url链接:{this.state.currentHistoryDetail1.url}</div>
                      : 
                      this.state.currentHistoryDetail1.img_arr.map((item, index) => {
                            return (
                                <div className="showDitalDiv" key={index}>
                                    {item.img_path ?
                                        <img src={item.img_path} alt="..." width='100%' height='300px' /> : ''}
                                    <div className="showDitalP">
                                        <h3>{item.img_intro&&item.img_intro.length>40?item.img_intro.substring(0,40)+'...':item.img_intro}</h3>
                                        {/* {item.img_intro ? <p>{item.img_intro}</p> : ''} */}
                                    </div>
                                </div>
                            )
                        })
                  }
                  

                </div>
            </div>
            <div style={{width:'475px',paddingLeft:'15px'}}>
                <div className='tongji_box'>
                    <span>{currentHistoryDetail2.editor?'修改时间:'+this.state.currentList2.edit_time+'('+currentHistoryDetail2.editor+')':'修改时间:'+this.state.currentList2.edit_time}</span>
                    <span>{this.state.currentHistoryDetail2.url?'0字':this.state.currentList2.text_count+'字'}</span>
                </div>
                <div>
                    <h2 className='compare_title' id='ktitle2'></h2>
                    {
                        currentList2.diff_key&&<div className='compare_kwords' id='kwords2'></div>
                    }
                     {
                        currentList2.diff_intro&&<div className='compare_kwords' id='kintro2'></div>
                    }
                    
                    {
                      this.state.currentHistoryDetail2.type==1?this.state.currentHistoryDetail2.url? <div className='intro_box'>url链接:{this.state.currentHistoryDetail2.url}</div>
                      : <div id='compare_content2'>
                      </div>:this.state.currentHistoryDetail2.url? <div className='intro_box'>url链接:{this.state.currentHistoryDetail2.url}</div>
                      : 
                      this.state.currentHistoryDetail2.img_arr.map((item, index) => {
                            return (
                                <div className="showDitalDiv" key={index}>
                                    {item.img_path ?
                                        <img src={item.img_path} alt="..." width='100%' height='300px' /> : ''}
                                    <div className="showDitalP">
                                        <h3>{item.img_intro&&item.img_intro.length>40?item.img_intro.substring(0,40)+'...':item.img_intro}</h3>
                                        {/* {item.img_intro ? <p>{item.img_intro}</p> : ''} */}
                                    </div>
                                </div>
                            )
                        })
                  }

                </div>
            </div>
        </div>
             
          </Modal>
    }
         <Modal
            title="版本对比(红色代表删除的内容，蓝色表示新增的内容)"
            visible={this.state.compareVisible}
            onOk={this.handleCompareOk}
            onCancel={this.handleCompareOk}
            width='1000px'
          >
              <Table
        rowSelection={{
          type: Checkbox,
          ...rowSelection,
          selectedRowKeys:this.state.selectedRowKeys
        }}
        rowKey='id'
        columns={columns}
        dataSource={history_list}
      />
          {this.state.compareVisible&&this.state.currentHistoryDetail2!==null&&this.state.currentHistoryDetail1!==null?<> <div className='top_box'>
            <div style={{width:'475px',paddingRight:'15px',borderRight:'1px solid #EDEDED'}}>
                <div className='tongji_box'>
                    <span>{currentHistoryDetail1.editor?'修改时间:'+this.state.currentList1.edit_time+'('+currentHistoryDetail1.editor+')':'修改时间:'+this.state.currentList1.edit_time}</span>
                    <span>{this.state.currentHistoryDetail1.url?'0字':this.state.currentList1.text_count+'字'}</span>
                </div>
                <div>
                    <h2 className='compare_title' id='ctitle1'></h2>
                    {
                        currentList1.diff_key&&<div className='compare_kwords' id='cwords1'></div>
                    }
                     {
                        currentList1.diff_intro&&<div className='compare_kwords' id='cintro1'></div>
                    }
                    
                    {
                      this.state.currentHistoryDetail1.type==1?this.state.currentHistoryDetail1.url? <div className='intro_box'>url链接:{this.state.currentHistoryDetail1.url}</div>
                      : <div id='compare_content1'>
                      </div>:this.state.currentHistoryDetail1.url? <div className='intro_box'>url链接:{this.state.currentHistoryDetail1.url}</div>
                      : 
                      this.state.currentHistoryDetail1.img_arr.map((item, index) => {
                            return (
                                <div className="showDitalDiv" key={index}>
                                    {item.img_path ?
                                        <img src={item.img_path} alt="..." width='100%' height='300px' /> : ''}
                                    <div className="showDitalP">
                                        <h3>{item.img_intro&&item.img_intro.length>40?item.img_intro.substring(0,40)+'...':item.img_intro}</h3>
                                        {/* {item.img_intro ? <p>{item.img_intro}</p> : ''} */}
                                    </div>
                                </div>
                            )
                        })
                  }

                </div>
            </div>
            <div style={{width:'475px',paddingLeft:'15px'}}>
                <div className='tongji_box'>
                    <span>{currentHistoryDetail2.editor?'修改时间:'+this.state.currentList2.edit_time+'('+currentHistoryDetail2.editor+')':'修改时间:'+this.state.currentList2.edit_time}</span>
                    <span>{this.state.currentHistoryDetail2.url?'0字':this.state.currentList2.text_count+'字'}</span>
                </div>
                <div>
                    <h2 className='compare_title' id='ctitle2'></h2>
                    {
                        currentList2.diff_key&&<div className='compare_kwords' id='cwords2'></div>
                    }
                     {
                        currentList2.diff_intro&&<div className='compare_kwords' id='cintro2'></div>
                    }
                    
                    {
                      this.state.currentHistoryDetail2.type==1?this.state.currentHistoryDetail2.url? <div className='intro_box'>url链接:{this.state.currentHistoryDetail2.url}</div>
                      : <div id='compare_content2'>
                      </div>:this.state.currentHistoryDetail2.url? <div className='intro_box'>url链接:{this.state.currentHistoryDetail2.url}</div>
                      : 
                      this.state.currentHistoryDetail2.img_arr.map((item, index) => {
                            return (
                                <div className="showDitalDiv" key={index}>
                                    {item.img_path ?
                                        <img src={item.img_path} alt="..." width='100%' height='300px' /> : ''}
                                    <div className="showDitalP">
                                        <h3>{item.img_intro&&item.img_intro.length>40?item.img_intro.substring(0,40)+'...':item.img_intro}</h3>
                                        {/* {item.img_intro ? <p>{item.img_intro}</p> : ''} */}
                                    </div>
                                </div>
                            )
                        })
                  }


                </div>
            </div>
        </div></>:<div style={{textAlign:'center',paddingTop:'10px',fontSize:'20px',color:'#ccc'}}>请选择需要对比的版本</div>}
             
          </Modal>
            </div>
        );
    }
}

export default DraftHistory;